<template>
    <div class="commodity" v-for="(item, index) in commodityInfo" :key="index">
        <van-card :thumb="item.img">
            <template #tags>
                <div class="specificationInfo">
                    <p>{{ item.name }} <span> {{ 'x' + item.num }} </span></p>
                    <div>
                        <span v-for="item, index in item.specification" :key="index" style="color: #838484">{{ item
                        }}</span>
                    </div>
                    <p>{{ '￥' + item.price }}</p>
                </div>
            </template>
        </van-card>
    </div>
</template>

<script>
export default {
    name: "commodityCard",
    props: {
        commodityInfo: {
            type: Array,
            default: '没有选择到商品，请重试',
        }
    },
};
</script>

<style scoped>
.commodity {
    margin-top: 5rem;
}

.commodity .specificationInfo p {
    font-size: 15rem;
}

.commodity .specificationInfo div {
    margin-top: 2px;
}

.commodity .specificationInfo p:nth-child(3) {
    margin-top: 18rem;
}

.van-card {
    background-color: #FFF;
}

.van-card__content p:nth-child(1)>span {
    float: right;
}
</style>